<template>
  <el-row>
    <el-col :span="24">
      <div class="grid-content bg-purple-dark">
        <div id="container"></div>
      </div>
    </el-col>
  </el-row>

</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
  securityJsCode: '94ac5494709d9ed7f029de95cf37ae40'
}
export default {
  data() {
    return {
      map: null
    }
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "99f26d65fb8281b1dc40f97bba0b7052",             // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Scale', 'AMap.ToolBar', 'AMap.HawkEye', 'AMap.MapType', 'AMap.Geolocation', 'AMap.Zoom'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.map = new AMap.Map("container", {
          //设置地图容器id
          viewMode: "3D",    //是否为3D地图模式
          zoom: 10,           //初始化地图级别
          center: [121.473667, 31.230525], //初始化地图中心点位置
        });
        // 在这一块引入主键，比例尺
        // 添加比例尺控件
        this.map.addControl(new AMap.Scale());
        this.map.addControl(new AMap.ToolBar());
        this.map.addControl(new AMap.HawkEye());
        // 显示地图 类型
        this.map.addControl(new AMap.MapType());
        // 定位 地图
        this.map.addControl(new AMap.Geolocation());
        this.map.addControl(new AMap.Zoom());
      }).catch(e => {

        console.log(e);
      })
    },
  },
  mounted() {

    //DOM初始化完成进行地图初始化
    this.initMap()
  }

}
</script>

<style lang="less" scoped>
#container {
  width: 100%;
  height: 100%;
  background-color: #00afff;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.bg-purple-dark {
  height: 840px;
  margin-left: 20px;
  background: #ffffff;
  margin-top: 25px;
  /* height: 100px; */
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  box-shadow: 0 4px 6px rgba(61, 61, 61, 0.1), 0 -4px 6px rgba(61, 61, 61, 0.1),
    -4px 0 6px rgba(61, 61, 61, 0.1), 2px 0 6px rgba(61, 61, 61, 0.1);
}
</style>
